<template>
  <transition name="el-zoom-in-center">
    <div class="JADP-preview-main">
      <div class="JADP-common-page-header">
        <el-page-header
          @back="goBack"
          :content="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"
        />
        <div class="options">
          <el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail"
            >确 定</el-button
          >
          <el-button @click="goBack">取 消</el-button>
        </div>
      </div>
      <el-tabs v-model="active" tab-position="left" style="margin-top: 10px">
        <el-tab-pane label="学员基本信息" name="jbxx">
          <div class="basicInformation">
            <el-row
              :gutter="15"
              class="main"
              :style="{ margin: '0 auto', width: '100%' }"
            >
              <el-form
                ref="elForm"
                :model="dataForm"
                size="small"
                label-width="100px"
                label-position="right"
                :disabled="isDetail"
              >
                <el-col :span="12">
                  <el-form-item label="姓名" prop="realname">
                    <el-input
                      v-model="dataForm.realname"
                      placeholder="请输入姓名"
                      clearable
                      :style="{ width: '100%' }"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="用户名" prop="account">
                    <el-input
                      v-model="dataForm.account"
                      placeholder="请输入用户名"
                      clearable
                      :style="{ width: '100%' }"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="证件类型" prop="certificatestype">
                    <el-select
                      v-model="dataForm.certificatestype"
                      placeholder="请选择证件类型"
                      clearable
                      :style="{ width: '100%' }"
                    >
                      <el-option
                        v-for="(item, index) in getDict('certificateType')"
                        :key="index"
                        :label="item.dataName"
                        :value="item.id"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="身份证号码" prop="certificatesnumber">
                    <el-input
                      v-model="dataForm.certificatesnumber"
                      placeholder="请输入证件号"
                      clearable
                      :style="{ width: '100%' }"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="性别" prop="gender">
                    <el-select
                      v-model="dataForm.gender"
                      placeholder="请选择性别"
                      clearable
                      :style="{ width: '100%' }"
                      :multiple="false"
                    >
                      <el-option
                        v-for="(item, index) in genderOptions"
                        :key="index"
                        :label="item.fullName"
                        :value="item.id"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="手机号码" prop="mobilephone">
                    <el-input
                      v-model="dataForm.mobilephone"
                      placeholder="请输入正确的手机号码"
                      clearable
                      :style="{ width: '100%' }"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="工作单位" prop="company">
                    <el-input
                      v-model="dataForm.company"
                      placeholder="请输入工作单位"
                      clearable
                      :style="{ width: '100%' }"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="单位类型" prop="companytype">
                    <el-select
                      v-model="dataForm.companytype"
                      placeholder="请选择单位类型"
                      clearable
                      :style="{ width: '100%' }"
                      :multiple="false"
                    >
                      <el-option
                        v-for="(item, index) in companytypeOptions"
                        :key="index"
                        :label="item.fullName"
                        :value="item.id"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="人员类型" prop="persontype">
                    <el-select
                      v-model="dataForm.persontype"
                      placeholder="请选择人员类型"
                      clearable
                      :style="{ width: '100%' }"
                      :multiple="false"
                    >
                      <el-option
                        v-for="(item, index) in persontypeOptions"
                        :key="index"
                        :label="item.fullName"
                        :value="item.id"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="科室/部门" prop="department">
                    <el-input
                      v-model="dataForm.department"
                      placeholder="请输入科室/部门"
                      clearable
                      :style="{ width: '100%' }"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="学历" prop="education">
                    <el-select
                      v-model="dataForm.education"
                      placeholder="请选择学历"
                      clearable
                      :style="{ width: '100%' }"
                      :multiple="false"
                    >
                      <el-option
                        v-for="(item, index) in educationOptions"
                        :key="index"
                        :label="item.fullName"
                        :value="item.id"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="职称" prop="title">
                    <el-input
                      v-model="dataForm.title"
                      placeholder="请输入职称"
                      clearable
                      :style="{ width: '100%' }"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="登记表附件" prop="registration">
                    <JADP-UploadFz
                      v-model="registrationList"
                      :fileSize="2"
                      sizeUnit="MB"
                      :limit="9"
                      buttonText="点击上传"
                    >
                    </JADP-UploadFz>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="学历证明附件" prop="academic">
                    <JADP-UploadFz
                      v-model="academicList"
                      :fileSize="2"
                      sizeUnit="MB"
                      :limit="9"
                      buttonText="点击上传"
                    >
                    </JADP-UploadFz>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="身份证附件" prop="idcard">
                    <JADP-UploadFz
                      v-model="idcardList"
                      :fileSize="2"
                      sizeUnit="MB"
                      :limit="9"
                      buttonText="点击上传"
                    >
                    </JADP-UploadFz>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="2 寸照片" prop="photo">
                    <JADP-UploadImg
                      v-model="photoList"
                      :fileSize="2"
                      sizeUnit="MB"
                      :limit="9"
                    >
                    </JADP-UploadImg>
                  </el-form-item>
                </el-col>

                <!-- <el-col :span="24">
                <el-form-item label="审核意见" prop="auditopinion">
                  <el-input
                    v-model="dataForm.auditopinion"
                    placeholder="请输入"
                    :style="{ width: '100%' }"
                    true
                    type="textarea"
                    :autosize="{ minRows: 4, maxRows: 4 }"
                  >
                  </el-input>
                </el-form-item>
              </el-col> -->
              </el-form>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="发票" name="fp">
          <el-row
            :gutter="15"
            class="main"
            :style="{ margin: '0 auto', width: '100%' }"
          >
            <el-form
              size="small"
              label-width="100px"
              label-position="right"
              :model="userInfo"
            >
              <el-col :span="12">
                <el-form-item label="收货人" prop="consignee">
                  <el-input v-model="userInfo.consignee" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话" prop="consigneephone">
                  <el-input
                    v-model="userInfo.consigneephone"
                    readonly
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="详细地址" prop="consigneeaddress">
                  <el-input
                    v-model="userInfo.consigneeaddress"
                    readonly
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发票抬头" prop="invoicetitle">
                  <el-input v-model="userInfo.invoicetitle" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="税号" prop="dutyparagraph">
                  <el-input
                    v-model="userInfo.dutyparagraph"
                    readonly
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="单位地址" prop="unitaddress">
                  <el-input v-model="userInfo.unitaddress" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="电话号码" prop="telephone">
                  <el-input v-model="userInfo.telephone" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="开户银行" prop="bank">
                  <el-input v-model="userInfo.bank" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="银行账号" prop="bankaccount">
                  <el-input v-model="userInfo.bankaccount" readonly></el-input>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
  </transition>
</template>
<script>
import request from "@/utils/request";
import { getDictionaryDataSelector } from "@/api/systemData/dictionary";
import { previewDataInterface } from "@/api/systemData/dataInterface";
import ExportBox from "./ExportBox";
import { userInfo } from "@/api/user";
export default {
  components: { ExportBox },
  props: [],
  data() {
    return {
      // 学员用户信息/发票
      userInfo: {},
      active: "jbxx",
      haha: "lalala",
      loading: false,
      visible: false,
      isDetail: false,
      activeName: "",
      dataForm: {
        certificatestype: undefined, //默认身份证
        certificatesnumber: undefined,
        account: undefined,
        realname: undefined,
        gender: "",
        mobilephone: undefined,
        company: undefined,
        companytype: "",
        persontype: "",
        department: undefined,
        education: "",
        title: undefined,
        registration: [],
        academic: [],
        idcard: [],
        photo: [],
        auditopinion: undefined,
        creatoruserid: "",
        creatortime: "",
        lastmodifyuserid: "",
        lastmodifytime: "",
        accountstatus: "7abdc53a877d4d9ba16fcbddf4a102d6",
        qualification: "28793a58bdbe4637ab89ad682b2fea5c",
        expirationtime: undefined,
        organizeId:""
      },
      rules: {
        certificatesnumber: [
          {
            required: true,
            message: "请输入证件号",
            trigger: "blur"
          }
        ],
        account: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }
        ],
        realname: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur"
          }
        ],
        gender: [
          {
            required: true,
            message: "请选择性别",
            trigger: "change"
          }
        ],
        mobilephone: [
          {
            required: true,
            message: "请输入正确的手机号码",
            trigger: "blur"
          },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        company: [
          {
            required: true,
            message: "请输入工作单位",
            trigger: "blur"
          }
        ],
        companytype: [
          {
            required: true,
            message: "请至少选择一个",
            trigger: "change"
          }
        ],
        education: [
          {
            required: true,
            message: "请至少选择一个",
            trigger: "change"
          }
        ]
      },
      genderOptions: [],
      companytypeOptions: [],
      persontypeOptions: [],
      educationOptions: [],
      registrationList: [],
      registration: [],
      academicList: [],
      academic: [],
      idcardList: [],
      idcard: [],
      photoList: [],
      photo: [],
      accountstatusOptions: [],
      qualificationOptions: []
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getgenderOptions();
    this.getcompanytypeOptions();
    this.getpersontypeOptions();
    this.geteducationOptions();
    this.getaccountstatusOptions();
    this.getqualificationOptions();
  },
  mounted() {},
  methods: {
    getgenderOptions() {
      getDictionaryDataSelector("963255a34ea64a2584c5d1ba269c1fe6").then(
        res => {
          this.genderOptions = res.data.list;
        }
      );
    },
    getcompanytypeOptions() {
      getDictionaryDataSelector("913e8d577af546529ee022e6523fcf37").then(
        res => {
          this.companytypeOptions = res.data.list;
        }
      );
    },
    getpersontypeOptions() {
      getDictionaryDataSelector("b40bd4cd9a1e492da68edfdcde636258").then(
        res => {
          this.persontypeOptions = res.data.list;
        }
      );
    },
    geteducationOptions() {
      getDictionaryDataSelector("6a6d6fb541b742fbae7e8888528baa16").then(
        res => {
          this.educationOptions = res.data.list;
        }
      );
    },
    getaccountstatusOptions() {
      getDictionaryDataSelector("a7fa40d83e014271a63271a16e96885f").then(
        res => {
          this.accountstatusOptions = res.data.list;
        }
      );
    },
    getqualificationOptions() {
      getDictionaryDataSelector("fea9b97d1e7748ac995ef0ad1649689f").then(
        res => {
          this.qualificationOptions = res.data.list;
        }
      );
    },
    goBack() {
      this.$emit("refresh");
    },
    init(id, isDetail) {
      this.$nextTick(() => this.$refs["elForm"].clearValidate());
      this.registrationList = [];
      this.academicList = [];
      this.idcardList = [];
      this.photoList = [];
      this.dataForm.id = id || 0;
      this.visible = true;
      this.isDetail = isDetail || false;
      this.$nextTick(() => {
        this.$refs["elForm"].resetFields();
        if (this.dataForm.id) {
          this.loading = true;
          request({
            url: "/api/students/Xy_ks_students/" + this.dataForm.id,
            method: "get"
          }).then(async res => {
            this.dataForm = res.data;
            this.registrationList = this.dataForm.registration
              ? JSON.parse(this.dataForm.registration)
              : [];
            this.academicList = this.dataForm.academic
              ? JSON.parse(this.dataForm.academic)
              : [];
            this.idcardList = this.dataForm.idcard
              ? JSON.parse(this.dataForm.idcard)
              : [];
            this.photoList = this.dataForm.photo
              ? JSON.parse(this.dataForm.photo)
              : [];
            this.loading = false;
            let {
              data: { list }
            } = await userInfo({ account: this.dataForm.account });
            this.userInfo = list[0];
          });
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$set(
        this.dataForm,
        "registration",
        this.registrationList.length
          ? JSON.stringify(this.registrationList)
          : ""
      );
      this.$set(
        this.dataForm,
        "academic",
        this.academicList.length ? JSON.stringify(this.academicList) : ""
      );
      this.$set(
        this.dataForm,
        "idcard",
        this.idcardList.length ? JSON.stringify(this.idcardList) : ""
      );
      this.$set(
        this.dataForm,
        "photo",
        this.photoList.length ? JSON.stringify(this.photoList) : ""
      );
      this.$refs["elForm"].validate(valid => {
        if (valid) {
          this.dataForm.organizeId= this.$store.getters.organizeId;
          if (!this.dataForm.id) {
            request({
              url: `/api/students/Xy_ks_students`,
              method: "post",
              data: this.dataForm
            }).then(res => {
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1000,
                onClose: () => {
                  (this.visible = false), this.$emit("refresh", true);
                }
              });
            });
          } else {
            request({
              url: "/api/students/Xy_ks_students/" + this.dataForm.id,
              method: "PUT",
              data: this.dataForm
            }).then(res => {
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1000,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refresh", true);
                }
              });
            });
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-tabs--left .el-tabs__item.is-left {
  text-align: left !important;
}
::v-deep .el-tabs--left .el-tabs__nav-scroll {
  height: 100vh;
}
.basicInformation {
  height: 81vh;
  // 超出滚动
  overflow: scroll;
}
</style>
